<script lang="ts" setup name="App">
    import { Suspense } from 'vue';
    import Child from './Child.vue';
</script>

<template>
    <div class="app">
        <h2>App组件</h2>
        <!-- 当子组件有异步任务时，可以使用Suspense来使用子组件。
             但Suspense不适合用作骨架屏，骨架屏有自己的解决方案。 -->
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template #fallback>
                <h3>加载中...</h3>
            </template>
        </Suspense>
    </div>
</template>

<style scoped>
    .app {
        background-color: #ddd;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
    }
</style>